<template>
  <view class="content">
    <image class="logo" src="/static/home.png"></image>
    <view class="text-area">
      <text class="title">{{title}}</text>
    </view>
    <button type="default" @tap="setIconNetwork()">网络图标</button>
    <button type="default" @tap="setIconBase64()">base64图标</button>
    <button type="default" @tap="setIconGif()">gif图标</button>
    <button type="default" @tap="hideIcon()">隐藏图标</button>
    <view class="text-area">
      <text class="title">{{title2}}</text>
    </view>
    <button type="default" @tap="changeAlign()">修改对齐方式</button>
    <button type="default" @tap="changeSubtitle()">修改副标题</button>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        title: '设置标题图标',
        title2: '设置标题',
        align: 'center',
        subtitle: ''
      }
    },
    onLoad() {

    },
    methods: {
      setIconNetwork(){
        var webview = this.$mp.page.$getAppWebview();
        webview.setStyle({titleNView:{
          titleIcon: 'https://demo.dcloud.net.cn/helloh5/img/ui.png'
        }});
      },
      setIconBase64(){
        var webview = this.$mp.page.$getAppWebview();
        webview.setStyle({titleNView:{
          titleIcon: ''
        }});
      },
      setIconGif(){
        var webview = this.$mp.page.$getAppWebview();
        webview.setStyle({titleNView:{
          titleIcon: '/static/loading.gif'
        }});
      },
      hideIcon(){
        var webview = this.$mp.page.$getAppWebview();
        webview.setStyle({titleNView:{
          titleIcon: '',
          titleIconRadius: '',
        }});
      },
      changeAlign(){
        this.align = ('center'===this.align)?'left':'center';
        var webview = this.$mp.page.$getAppWebview();
        webview.setStyle({titleNView:{
          titleAlign: this.align
        }});
      },
      changeSubtitle(){
        this.subtitle = (''===this.subtitle)?'副标题':'';
        var webview = this.$mp.page.$getAppWebview();
        webview.setStyle({titleNView:{
          subtitleText: this.subtitle
        }});
      }
    }
  }
</script>

<style>

</style>
